<!--
opts.pages: 总页数
opts.page: 当前页
opts.span: 前后页显示范围
opts.onChange
-->
<pagination-number>

  <ul class="pagination">
    <li show={hasPrevPage}>
      <a href="javascript:;" onclick={fn.jumpPage}>1</a>
    </li>
    <li show={hasPrevPage}>
      <a href="javascript:;" onclick={fn.prevPage}>
        &lt;
      </a>
    </li>
    <li show={hasPrevSpan}>...</li>
    <li each={p in prevPages}>
      <a href="javascript:;" onclick={fn.jumpPage}>{p}</a>
    </li>
    <li class="active">
      <a href="javascript:;">{page}</a>
    </li>
    <li each={p in nextPages}>
      <a href="javascript:;" onclick={fn.jumpPage}>{p}</a>
    </li>
    <li show={hasNextSpan}>...</li>
    <li if={hasNextPage}>
      <a href="javascript:;" onclick={fn.nextPage}>
        &gt;
      </a>
    </li>
    <li show={hasNextPage}>
      <a href="javascript:;" onclick={fn.jumpPage}>{pages}</a>
    </li>
    <li class="select" if="{opts.select=='y'}">
      跳转至
      <span if="{pageList.length<100}">
        <select onchange="{fn.jumpPage}">
          <option each="{p in pageList}" value="{p}" selected="{p==page}">{p}</option>
        </select>
      </span>
      <input if="{pageList.length>=100}"
        onchange="{fn.jumpPage}" type="number" value="{page}">
       / {pages}页
    </li>
  </ul>
  <script>
  var tag = this;
  tag.pageSpan = Number(opts.span || 4);
  tag.pageList = [];
  tag.fn = {
    pageList: function() {
      tag.pageList = [];
      for(var page = 1; page <= tag.pages; page++){
        tag.pageList.push(page);
      }
    },
    prevPages: function() {
      var i = tag.pageSpan;
      tag.hasPrevSpan = (tag.page - tag.pageSpan) > 0;
      tag.prevPages = [];
      while(i--){
        if(tag.page - i > 1 && i > 0){
          tag.prevPages.push(tag.page - i);
        }
      }
    },
    nextPages: function() {
      var i = 0;
      tag.hasNextSpan = (tag.page + tag.pageSpan) < tag.pages;
      tag.nextPages = [];
      while(++i < tag.pageSpan){
        if(tag.page + i < tag.pages){
          tag.nextPages.push(tag.page + i);
        }
      }
    },
    // 跳转页
    jumpPage: function(e) {
      tag.fn.page(Number(
        e.item ? e.item.p :
        e.target.value || e.target.innerText
      ));
    },
    // 上一页
    prevPage: function() {
      if(tag.hasPrevPage)
      tag.fn.page(tag.page - 1);
    },
    // 下一页
    nextPage: function() {
      if(tag.hasNextPage)
      tag.fn.page(tag.page + 1);
    },
    pageCount: function(){
      tag.hasNextPage = tag.pages > tag.page;
      tag.hasPrevPage = tag.page > 1;
      tag.fn.prevPages();
      tag.fn.nextPages();
    },
    // 切换页面
    page: function(n) {
      opts.onChange && opts.onChange(n);
    },
    // 渲染
    render: function(){
      tag.page = Number(opts.page || 1);
      tag.pages = Number(opts.pages || 1);
      tag.fn.pageList();
      tag.fn.pageCount();
    }
  };
  tag.on('mount', function(){});
  tag.on('update', function(){
    tag.fn.render();
  });
  </script>

</pagination-number>
